import { _tree } from "./tree.js"
import { dom, _accordion, _queryAll, _query, _removeClassName, _addClassName, _closest, _toggleClassName } from "./dom.js"
import { rerenderInspector } from './g2.js'
import { renderContent } from './renderContent.js'
import { store } from '../store/index.js'
import { queryToObject } from "./route.js"

export const setNavTreeConfig = ({ target, root }) => {
    store.screenViewer = target
    store.root = root
}
// 解析目录item
const parseTreeItem = (t) => {
    return new Promise((resolve) => {
        if (t.content) {
            return resolve(t)
        }
        else if (t.url) {
            if (/^canvas.*?/.test(t.url)) {
                import(`../data/canvas/index.js`).then(res => {
                    return resolve({
                        ...t,
                        content: res[t.url],
                    })
                })
            }

            else if (/^svg.*?/.test(t.url)) {
                import(`../data/svg/index.js`).then(res => {
                    return resolve({
                        ...t,
                        content: res[t.url],
                    })
                })
            } else if (/^(webgl|gl).*?/.test(t.url)) {
                import(`../data/webgl/index.js`).then(res => {
                    return resolve({
                        ...t,
                        content: res[t.url],
                    })
                })
            } else {
                import(`../data/html.js`).then(res => {
                    return resolve({
                        ...t,
                        content: res[t.url],
                    })
                })
            }

        }
    })

}

const handleClick = (t, enterFromUrl = false) => {
    parseTreeItem(t).then(t => {

        // 从url种获取参数
        if (enterFromUrl) {
            if (t.content && Array.isArray(t.content.shapes) && t.content.shapes.length >= 1) {
                let q = queryToObject()
                let s = t.content.shapes[0]
                Object.assign(s, q)
            }
        }

        let { content, isHtml } = renderContent(t)
        let panel = dom.div(content, {
            name: t.name,
            role: t.name,
            class: 'panel',
            isHtml
        })
        store.currentPage = t
        _accordion(panel, `.panel[name=${t.name}]`, store.screenViewer, store.root)

        //   图形配置表单
        if (t.content && ['svg', 'canvas'].includes(t.contentType)) {
            rerenderInspector(t)
        }

    })
}
const handleTreeItemClick = (t, el, enterFromUrl) => {
    if (!t.content && !t.url) return
    let items = _queryAll(".tree-item")
    _removeClassName(items, "active")
    _addClassName(el, "active")

    // 分组折叠
    let lis = _queryAll(".navtree>ul>li")
    if (lis.length) {
        _removeClassName(lis, "active")
        let ul = _closest(el, "ul")
        let li = _closest(ul, "li")
        _addClassName(li, "active")
    }


    handleClick(t, enterFromUrl)
}
const renderItem = (t, treeLevel) => {
    let title = t.title
    if (treeLevel === 0) {
        // 菜单分组
        let itcon = dom.i('', {
            class: 'icon-arrow'
        })
        return dom.div([title, itcon], {
            role: t.name
        }, (e) => {
            let el = e.target
            let li = _closest(el, 'li')
            _toggleClassName(li, 'active')
            // let icon = _query('i', li)
            // _toggleClassName(icon, 'icon-arrow-right', 'icon-arrow-down')
        })

    } else if (treeLevel === 1) {
        // 画图菜单
        return dom.div([title], {
            class: 'tree-item',
            role: t.name
        }, (e) => {
            let el = e.target
            handleTreeItemClick(t, el)
        })
    }
}

export const _navTree = ({ name, data }) => {
    let tree = _tree(data, renderItem)
    let navtree = dom.div([tree], {
        class: 'navtree',
        role: name
    })
    _accordion(navtree, `.navtree[role=${name}]`, ".aside", store.root)
}

export const clickTreeItem = (t, enterFromUrl) => {
    let el = _query(`.tree-item[role=${t.name}]`)
    handleTreeItemClick(t, el, enterFromUrl)

    el && setTimeout(() => {
        el.scrollIntoView()
    }, 300)


}